<template>
  <!-- <q-tr :props="props" class="bg-panda-dark-dark text-panda-text-light panda-table"> -->
  <q-tr :props="props" class="panda-table" :class="compute_table_row_bg(props.row)">
    <q-td
      key="select"
      class="panda-table panda-table-col-checkbox"
      :style="compute_table_col_width('select')"
      :props="props"
    >
      <q-checkbox
        class="text-panda-text-dark"
        color="primary"
        style
        v-if="!props.row.is_child_showing"
        v-model="props.row.is_selected"
        @input="selected_table_items_change(props.row)"
      />
    </q-td>
    <q-td
      key="expanded"
      class="panda-table panda-table-col-checkbox"
      :style="compute_table_col_width('expanded')"
      :props="props"
    >
      <q-icon
        :name="props.row.show_expand?'remove':'add'"
        size="1em"
        v-if="is_top_slot!=1"
        v-show="!props.row.is_child_showing&&props.row.relatedTour&&props.row.relatedTour.length>0"
        @click="table_item_click_expanded(props.row)"
      ></q-icon>
    </q-td>
    <q-td
      key="tournamentManagerId"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('tournamentManagerId')"
      :props="props"
    >
      <span
        @click="table_item_click(props.row)"
      >{{ props.row.tournamentManagerId>0?props.row.tournamentManagerId:'' }}</span>
    </q-td>
    <q-td
      key="tournamentLevel"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('tournamentLevel')"
      :props="props"
    >
      <div v-if="!props.row.is_child_showing">
        <span
          v-if="!props.row.show_level_change"
          @click="table_item_click(props.row)"
        >{{filter_value_to_label("match_level",props.row.tournamentLevel)}}</span>
      </div>
      <div
        class="row justify-center relative-position"
        style="height:20px;"
        v-if="props.row.show_level_change&&!props.row.is_child_showing"
      >
        <q-select
          filled
          rounded
          color="panda-text-light"
          bg-color="panda-light-light"
          style="    width: 100px;"
          v-model="props.row.tournamentLevel"
          hide-bottom-space
          :options="match_level_constant"
          emit-value
          map-options
          dense
          options-dense
          :input-style="{ backgroundColor: '#ff0000' }"
          popup-content-class="bg-panda-light-light text-panda-text-light"
        ></q-select>
        <div class="absolute" style="top:0px; left:calc(50% + 54px);">
          <q-btn
            class="panda-btn-dense panda-btn-light-dense"
            label="OK"
            @click="submit_table_item_tournamentLevel_change(props.row)"
          />
        </div>
      </div>
    </q-td>
    <q-td
      key="standardSportRegionId"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('standardSportRegionId')"
      :props="props"
    >
      <span
        @click="table_item_click(props.row)"
      >{{ filter_value_to_label('sport_region', props.row.standardSportRegionId, 'id', 'introduction') }}</span>
    </q-td>
    <q-td
      key="nameChineseSimple"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('nameChineseSimple')"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'nameChineseSimple', compute_languagename_by_key(props.row,'tournamentName', 'zs'))"
      ></tablecellshow>
    </q-td>
    <q-td
      key="name"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('name')"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'name', compute_languagename_by_key(props.row,'tournamentName', 'jc'))"
      ></tablecellshow>
    </q-td>
    <q-td
      key="nameChineseTradition"
      :style="compute_table_col_width('nameChineseTradition')"
      class="panda-table panda-table-col-text-indent"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'nameChineseTradition', compute_languagename_by_key(props.row,'tournamentName', 'zh'))"
      ></tablecellshow>
    </q-td>
    <q-td
      key="nameEn"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('nameEn')"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'nameEn', compute_languagename_by_key(props.row,'tournamentName', 'en'), 12)"
      ></tablecellshow>
    </q-td>
    <q-td
      key="dataSourceCode"
      class="panda-table panda-table-col-text-indent"
      :style="compute_table_col_width('dataSourceCode')"
      :props="props"
    >
      <span
        @click="table_item_click(props.row)"
      >{{ compute_table_item_show_dataSourceCode(props.row) }}</span>
    </q-td>
    <q-td
      key="action"
      class="panda-table text-left"
      :style="compute_table_col_width('action')"
      :props="props"
    >
      <!-- <div @click="table_item_click(props.row)"> -->
      <div v-if="is_top_slot!=1">
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,1)"
          @click="edit_table_item(props.row)"
        >编辑管理</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,1)"
          @click="change_match_level(props.row)"
        >等级修改</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,2)"
          @click="create_tournamentManagerId(props.row)"
        >生成联赛ID</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,3)"
          @click="handle_undo_associate_match(props.row)"
        >取消关联</span>
      </div>
    </q-td>
  </q-tr>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import tableColWidthmixin from "src/mixins/style/tableColWidth.js";
import matchmixin from "src/mixins/pages/match/match.js";
import selectedTableItemMixin from "src/mixins/pages/match/selectedTableItem.js";
import { match_resource_tabledata } from "src/mock/match/index.js";
import { tablecolumns_config } from "src/pages/match/resource/config/config.js";
import selectSportType from "src/components/query/selectSportType.vue";
import dataSourceCode from "src/components/query/dataSourceCode.vue";
import tableheader from "src/components/table/tableheader.vue";
import pandaPagination from "src/components/pagination/pagination.vue";
import breakwordsmixin from "src/mixins/style/breakwords.js";
import constantmixin from "src/mixins/constant/index.js";
import selectedApiModel from "src/mixins/constant/module/selectedApiModel.js";
import alertmessagemixin from "src/mixins/module/alertmessagemixin.js";
import dialogmixin from "src/mixins/module/dialogmixin.js";
import alert_component from "src/config/alert/match.js";
import tablecellshow from "src/components/table/tablecellshow.vue";
import alllanguage from "src/mixins/language/alllanguage.js";

import { dom } from "quasar";
const { height, width } = dom;
export default {
  mixins: [
    ...constantmixin,
    tableColWidthmixin,
    matchmixin,
    selectedTableItemMixin,
    breakwordsmixin,
    selectedApiModel,
    alertmessagemixin,
    dialogmixin,
    alllanguage
  ],
  components: {
    tablecellshow
  },
  data() {
    return {};
  },
  props: {
    props: "",
    is_top_slot: "",
    show_right_detail_obj: "",
    tablecolumns: ""
  },
  methods: {
    emit_init_tabledata() {
      this.$emit("init_tabledata");
    },
    table_item_click(item) {
      this.$emit("item_click", item);
    },
    table_item_click_expanded(item) {
      this.$emit("table_item_click_expanded", item);
    },

    selected_table_items_change(item) {
      this.$emit("toggle_select", item);
    },
    change_match_level(item) {
      this.$emit("change_match_level", item);
    },

    edit_table_item(item) {
      console.log(item);
      this.$router.push({
        name: "match_resource_edit",
        query: {
          editing_obj_id: item.id
        }
      });
    },

    submit_table_item_tournamentLevel_change(item) {
      console.log(item);
      item.show_level_change = false;
      let params = {
        id: item.id,
        tournamentLevel: item.tournamentLevel
      };
      console.log(params);
      api_match
        .post_tournament_modify(params)
        .then(res => {
          this.alert_message(res);
          this.emit_init_tabledata();
        });
    },
    compute_table_row_bg(item) {
      let str = "";
      str = item.is_child_showing ? "bg-panda-dark-dark" : "bg-panda-base-dark";
      if (item.is_selected) {
        str = "bg-panda-dark-light";
      }
      if (
        this.show_right_detail_obj &&
        item.id == this.show_right_detail_obj.id
      ) {
        str = "bg-panda-dark-light";
      }
      return str;
    },

    create_tournamentManagerId(item) {
      console.log(item);
      console.log(this.api_model_name);
      console.log(this.selectedSportTypeInfo);
      // 如果是BC 数据 需要先 独立生成标准联赛，再生成联赛ID
      // SR 自动生成 // 因此对于目前版本 其实只有 BC 会 进入此功能
      if (!item.standard) {
        // 两次调用
        this.create_tournamentManagerId_when_bc(item);
      } else {
        let params = {
          id: item.id
        };
        console.log(params);

        // return false;
        api_match
          .post_tournament_createManageId(params)
          .then(res => {
            this.alert_message(res);
            this.emit_init_tabledata();
          });
      }
    },
    create_tournamentManagerId_when_bc(item) {
      let message =

        `<div class='q-mt-lg'>当前数据为非标准数据，将会先执行三方数据入库操作，是否继续？</div>`;

      this.$q
        .dialog({
          title: "",
          message: message,
          html: true,
          cancel: {
            color: "white",
            label: "取消",
            textColor: "black",
            class:'order-last',
            style:"order: 2"
          },
          persistent: true,
          ok: {
            label: "确定",
            class:'order-first',
            style:"order: 1"
          }
        })
        .onOk(() => {
          this.create_tournamentManagerId_when_bc_(item);
        })
        .onCancel(() => {
          this.finish_script_dialog_process_default();
        })
        .onDismiss(() => {
          console.log("I am triggered on both OK and Cancel");
        });
    },
    create_tournamentManagerId_when_bc_(item) {
      let params = {
        sourceId: [item.id]
      };

      // return false;
      api_match
        .post_tournament_associate(params)
        .then(res => {
          let code = this.$lodash.get(res, "data.code");
          if (code == 200) {
            let data = this.$lodash.get(res, "data.data.records")[0];
            this.create_tournamentManagerId(data);
          }
          this.alert_message(res);
        });
    },

    handle_undo_associate_match(item) {
      let message = alert_component.Association_data;
      this.to_undo_associate_match_item = item;
      this.begin_script_dialog_process(
        message,
        this.handle_undo_associate_match_onOk
      );
    },
    handle_undo_associate_match_onOk() {
      let item = this.to_undo_associate_match_item;
      let params = {
        sourceId: item.id,
        targetId: item.parent_id
      };
      console.log(params);
      // return false;

      api_match
        .post_tournament_undoAssociate(params)
        .then(res => {
          let code = this.$lodash.get(res, "data.code");
          if (code == 200) {
            this.handle_dialog_onOk_callback_success(
              alert_component.Unlink_success,
              () => {
                this.emit_init_tabledata();
              }
            );
          } else {
            this.handle_dialog_onOk_callback_error(
              alert_component.Unlink_failure
            );
            this.alert_message(res);
          }
        });
    },
    compute_if_handle_btn_show(item, params) {
      let show = false;
      if (params == 1) {
        //正常情况  显示 必须有  小编生成 的 或者自动生成的 ID  才能 编辑管理和等级修改
        if (!item.is_child_showing && item.tournamentManagerId > 0) {
          //非子关联项 并且 有 联赛ID 并且不为0
          show = true;
        }
      } else if (params == 2) {
        // 显示 生成联赛ID  单条
        // 单条BC 或者 关联后 的数据
        if (
          !item.is_child_showing &&
          item.tournamentManagerId <= 0 &&
          (item.standard || item.dataSourceCode == "BC")
        ) {
          //非子关联项 并且 无 联赛ID 或者联赛ID为0   并且 BC数据源
          show = true;
        }
      } else if (params == 3) {
        // 显示 取消关联
        if (
          item.is_child_showing &&
          item.dataSourceCode != item.parent_dataSourceCode
        ) {
          show = true;
        }
      }
      return show;
    }
  }
};
</script>